<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dazi</title>
	<script src='jquery-1.7.2.min.js'></script>
	<script>
		$(function(){
			// 设置定时器
			var timer = '';
			// 定义字母数组
			var zm = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
			var correct_point = 0;
			var wrong_point = 0;
			timer = setInterval(function(){
				// 定义随机数，用来随机字母
				var num1 = Math.floor(Math.random()*(zm.length-1+1-0)+0);
				// 定义随机数(2-10)，用来随机字母水平位置
				var num2 = Math.floor(Math.random()*(9+1-1)+2);
				// 定义随机数，用来随机字母大小写
				var num3 = Math.floor(Math.random()*2);
				// 根据随机数num3随机字母大小写
				// if(num3 == 0){
				// 	letter = String.toUpperCase(zm[num1]);
				// }else{
				// 	letter = String.toLowerCase(zm[num1]);
				// }
				// 创建字母元素并设置位置样式.
				var word = $('<span>'+zm[num1]+'</span>').css('left',num2*100+'px');
				// 将新建的字母添加到box中
				word.appendTo('.box');
				// 添加下落动画
				word.animate({'top':'600px'},5000,function(){
					// 如果word还没被删除则删除word节点
					word.remove()
					wrong_point++;
					$('.point .no').html(wrong_point);
				});
			},500);
			$(window).keypress(function(e){
				// 获取事件对象
				var ev = window.event||e;
				// 获取按下的键的值
				var word = String.fromCharCode(e.charCode);
				// 设置sta判断是否按下的正确的键
				var sta = 0;
				// 对box中的所有字母进行判断，找到与按下的键相同的字母并将其删除
				for(var i=0;i<$('.box span').length;i++){
					// 判断如果按下的键的值与当前span的文本值相同则删除当前span节点
					if($('.box span').eq(i).html() == word){
						$('.box span').eq(i).stop().remove();
						sta = 1;
						break;
					}
				}
				// 判断是否按下的正确的键，如果是则正确数加一，否则错误数加一
				sta?correct_point++:wrong_point++;
				// 将正确数和错误数对应html标签里
				$('.point .yes').html(correct_point);
				$('.point .no').html(wrong_point);
			})
		})
	</script>
	<style>
		*{
			padding: 0;
			margin: 0;
			font-family: '微软雅黑';
		}
		a{
			text-decoration: none;
		}
		.box{
			width:1200px;
			margin:0 auto;
			background: #000;
			height:700px;
			position: relative;
		}
		.box span{
			position: absolute;
			color:#fff;
			font-size:40px;
			top:0;
			height:40px;
			line-height: 40px;
			width:20px;
			display: block;
		}
		.point{
			position: absolute;
			left:0;
			top:0;
			color:#fff;
			font-size: 30px;
		}
		.point .yes{
			color:#00FF00;
			margin-left: 10px;
		}
		.point .no{
			color:red;
			margin-left: 10px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="point">
			<p>正确数:<a href="javascript:void();"class="yes"></a></p>
			<p>错误数:<a href="javascript:void();"class="no"></a></p>
		</div>
	</div>
	
</body>
</html>